<template>
  <el-dialog
    :title="!dataForm.usId ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    append-to-body>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-width="80px">
      <el-form-item label="用户名称" prop="usUserName">
        <el-input v-model="dataForm.usUserName" placeholder="用户名称"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="usPassword">
        <el-input v-model="dataForm.usPassword" placeholder="密码" show-password></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="usSex">
<!--        <el-input v-model="dataForm.usSex" placeholder="性别"></el-input>-->
        <template>
          <el-radio v-model="dataForm.usSex" label="0">女</el-radio>
          <el-radio v-model="dataForm.usSex" label="1">男</el-radio>
        </template>
      </el-form-item>
      <el-form-item label="生日" prop="usBirthday">
<!--        <el-input v-model="dataForm.usBirthday" placeholder="生日"></el-input>-->
        <div class="block">
<!--          <span class="demonstration">默认</span>-->
          <el-date-picker
            v-model="dataForm.usBirthday"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="签名" prop="usSignature">
        <el-input v-model="dataForm.usSignature" placeholder="签名"></el-input>
      </el-form-item>
      <el-form-item label="头像" prop="usProfilePhoto">
        <single-upload-user-img v-model="dataForm.usProfilePhoto"></single-upload-user-img>
<!--        <el-upload-->
<!--          class="avatar-uploader"-->
<!--          action="https://jsonplaceholder.typicode.com/posts/"-->
<!--          :show-file-list="false"-->
<!--          :on-success="handleAvatarSuccess"-->
<!--          :before-upload="beforeAvatarUpload">-->
<!--          <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
<!--          <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--        </el-upload>-->
<!--      </el-form-item>-->
      <!--    <el-form-item label="创建时间" prop="usCreationTime">-->
      <!--      <el-input v-model="dataForm.usCreationTime" placeholder="创建时间"></el-input>-->
      <!--    </el-form-item>-->
      <!--    <el-form-item label="更新时间" prop="usUpdateTime">-->
      <!--      <el-input v-model="dataForm.usUpdateTime" placeholder="更新时间"></el-input>-->
      <!--    </el-form-item>-->
      <!--    <el-form-item label="状态 0-正常,1-封禁,2-异常,3-待处理,4-注销" prop="usStatus">-->
      <!--      <el-input v-model="dataForm.usStatus" placeholder="状态 0-正常,1-封禁,2-异常,3-待处理,4-注销"></el-input>-->
          </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import singleUploadUserImg from '@/components/upload/singleUploadUserImg.vue'

export default {
  data() {
    return {
      visible: false,
      dataForm: {
        usId: 0,
        usUserName: '',
        usPassword: '',
        usSex: '',
        usBirthday: '',
        usSignature: '',
        usProfilePhoto: '',
        usCreationTime: '',
        usUpdateTime: '',
        usStatus: '',
        imageUrl: '',
        value1: '',
      },
      dataRule: {
        usUserName: [
          {required: true, message: '用户名称不能为空', trigger: 'blur'}
        ],
        usPassword: [
          {required: true, message: '密码不能为空', trigger: 'blur'}
        ],
        usSex: [
          {required: true, message: '性别不能为空', trigger: 'blur'}
        ],
        usBirthday: [
          {required: true, message: '生日不能为空', trigger: 'blur'}
        ],
        usSignature: [
          {required: true, message: '签名不能为空', trigger: 'blur'}
        ],
        usProfilePhoto: [
          {required: true, message: '头像不能为空', trigger: 'blur'}
        ],
        // usCreationTime: [
        //   { required: true, message: '创建时间不能为空', trigger: 'blur' }
        // ],
        // usUpdateTime: [
        //   { required: true, message: '更新时间不能为空', trigger: 'blur' }
        // ],
        // usStatus: [
        //   { required: true, message: '状态 0-正常,1-封禁,2-异常,3-待处理,4-注销不能为空', trigger: 'blur' }
        // ]
      }
    }
  },
  components:{
    singleUploadUserImg
  },
  methods: {
    init(id) {
      this.dataForm.usId = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.usId) {
          this.$http({
            url: this.$http.adornUrl(`/fiction/tbuser/info/${this.dataForm.usId}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then((data) => {
            if (data && data.code === 200) {
              this.dataForm.usUserName = data.tbUser.usUserName
              this.dataForm.usPassword = data.tbUser.usPassword
              this.dataForm.usSex = data.tbUser.usSex
              this.dataForm.usBirthday = data.tbUser.usBirthday
              this.dataForm.usSignature = data.tbUser.usSignature
              this.dataForm.usProfilePhoto = data.tbUser.usProfilePhoto
              this.dataForm.usCreationTime = data.tbUser.usCreationTime
              this.dataForm.usUpdateTime = data.tbUser.usUpdateTime
              this.dataForm.usStatus = data.tbUser.usStatus
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/fiction/tbuser/${!this.dataForm.usId ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'usId': this.dataForm.usId || undefined,
              'usUserName': this.dataForm.usUserName,
              'usPassword': this.dataForm.usPassword,
              'usSex': this.dataForm.usSex,
              'usBirthday': this.dataForm.usBirthday,
              'usSignature': this.dataForm.usSignature,
              'usProfilePhoto': this.dataForm.usProfilePhoto,
              'usCreationTime': this.dataForm.usCreationTime,
              'usUpdateTime': this.dataForm.usUpdateTime,
              'usStatus': this.dataForm.usStatus
            })
          }).then((data) => {
            if (data && data.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
